<template>
    <div class="form">
        <el-form label-width="auto" :rules="formRules" ref="formRef" :model="parking">
            <el-form-item label="类型">
                <el-select v-model="parking.parkingType" placeholder="停车场类型" style="width: 400px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="停车场ID" prop="parkingID">
                <el-input type="tel" v-model="parking.parkingID" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="停车场编号" prop="parkingNum">
                <el-input type="tel" v-model="parking.parkingNum" placeholder="请输入"></el-input>
            </el-form-item>
            <el-table-column prop="parking.createTime" label="创建时间">
          <template #default="scope">
            {{ formatMyDate(scope.row.parking.createTime) }}
          </template>
        </el-table-column>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="parking.notes" style="width: 400px" :rows="6"
                    placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save(formRef)">保存</el-button>
                <el-button type="info" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>
<script setup>
import http from '../utils/http'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
import { onBeforeMount } from 'vue';
let router = useRouter()
const size = ref < 'default' | 'large' | 'small' > ('default')
const createTime = ref('')
const options = [
    {
        value: '地上停车场',
        label: '地上停车场',
    },
    {
        value: '地下停车场',
        label: '地下停车场',
    }
]
// 日期格式化方法
function formatMyDate(date) {
  if (date) {
    const dateObj = new Date(date);
    const year = dateObj.getFullYear();
    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
    const day = String(dateObj.getDate()).padStart(2, '0');
    const hour = String(dateObj.getHours()).padStart(2, '0');
    const minute = String(dateObj.getMinutes()).padStart(2, '0');
    const second = String(dateObj.getSeconds()).padStart(2, '0');

    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  }
  return '';
}

let parking = ref({
    id: router.currentRoute.value.query.id,
    parkingType: '',
    parkingID: '',
    parkingNum: '',
    createTime: '',
    notes: ''
})
let formRef = ref(null) //表单dom对象
let formRules = {
    parkingID: [
        { required: true, message: '请输入停车场ID', trigger: 'blur' }
    ],
    parkingNum: [
        { required: true, message: '请输入停车场编号', trigger: 'blur' }
    ]
}
onBeforeMount(async () => {
    if (parking.value.id) {
        let resp = await http.get(`/parking/get/${parking.value.id}`)
        parking.value = resp.data
    }
})
async function save(formRef) {
    formRef.validate(async function (valid) {
        if (valid) {
            let path = parking.value.id ? '/parking/update' : '/parking/add'
            let tip = parking.value.id ? '修改' : '保存'
            let resp = await http.post(path, parking.value)
            if (resp.code == 200) {
                ElMessageBox.alert(tip + '账户成功', tip + '账户', {
                    confirmButtonText: 'OK'
                })
                router.go(-1)
            } else {

            }
        }
    })
}
function cancel() {
    router.go(-1)
}

</script>
<style lang="css" scoped>
.form {
    width: 400px;
    margin: 0 auto;
}

.el-form-item__label {
    width: 120px;
}
</style>